<!doctype html>
<html lang="zh_CN">
  <head>
    <meta charset="utf-8">
    <title>API 测试工具</title>
	<style>
		body{
    		margin: 0;
    		padding: 0;
    		font-size: 14px;
    		font-family: '宋体';
    		font-color: #666;
    	}
    	
    	ul{
    		margin: 0;
    		padding: 0;
    	}
    	
    	ul li {
    		list-style: none;
    	}
    	
    	h1, h2, h3 {
    		margin:0;
    		padding: 0;
    	}
    	
    	.text-center {
    		text-align: center;
    	}
    	
        .clear {
        	clear: both;
        }
        
        .top {
        	background-color: #f8f9fa;
        	padding: 1em;
        	font-size: 16px;
        	height: 60px;
        	box-sizing: border-box;
        	border-bottom: 1px solid #ccc;
        }
        
        .test-name {
        	float: left;
        }
        
        .test-uri-list {
        	float: left;
        	margin-left: 50px;
        	position: relative;
        	min-width: 350px;
        }
        
        .version-list {
        	float: right;
        	position: relative;
        }
        
        .test-uri-list ul,
        .version-list ul {
        	position: absolute;
        	display: none;
        	right: 0;
        	top: 20px;
        	background: #f8f9fa;
        	width: 100%;
        	text-align: right;
        }
        
        .test-uri-list ul{
        	text-align: center;        
        }
        
        .test-uri-list ul li,
        .version-list ul li{
			border: 1px solid #ccc;
			padding: 5px;
        }
        
        .test-uri-list:hover ul,
        .version-list:hover ul {
        	display: block;
        }
        
        .container { 
        	overflow: scroll; 
        }
        
		.api-list {
            width: 250px;
            border-right: 1px solid #ccc;
            position: absolute;
            top: 60px;
            left: 0;
            bottom: 0;
            background: #f8f9fa;
        	font-size: 16px;
        }

		.api-list li {
			border-bottom: 1px solid #efefef;
		}

        .api-list li.current a {
        	color: #4798e5;
        }

        .api-list li a {
        	display: block;
			width: 100%;
			text-decoration: none;
        	padding: 0.25em;
        	color: #333;
			padding-left: 20px;
			box-sizing: border-box;
        }
        
        .api-list li a:hover {
			background: #eff1f3;
        }

        .left {
        	position: absolute;
        	padding: 15px;
        	top: 60px;
        	left: 250px;
        	right: 0;
        	bottom: 0;
        	width: calc((100% - 250px)/(100/40));
        	box-sizing: border-box;
        }
        
        .left .input-group {
        	width: 100%;
        }

        .left .input-group label {
        	display: block;
        	box-sizing: border-box;
        	width: 25%;
        	float: left;       
        	text-align: right; 
        	padding-right: 15px;
        }
        
        .left .input-group input {
        	display: block;
        	box-sizing: border-box;
        	width: 75%;
        	left: right;
        }
        
        .left .button {
        	float:right;
        	margin: 2px;
        }
                
        .right {
        	border-left: 1px solid #ccc;
        	box-sizing: border-box;
        	position: absolute;
        	padding: 15px;
        	top: 60px;
        	left: calc((100% - 250px)/(100/40) + 250px);
        	right: 0;
        	bottom: 0;
        }
        
        .right textarea {
        	width: 100%;
        	height: 10em;
        }
        
        .right iframe {
        	border: 1px solid #ccc;
        	width: 100%;
        	height: 10em;
        	overflow:auto;
        }
    </style>
  </head>
  <body>
	<div class="top">
    	<div class="test-name"><?=$test_name?></div>
		<?php IF($uris): ?>
		<div class="test-uri-list">
  			<span><b>API 请求 URI:</b> <?=$cur_uri?></span>
  			<b><a href="<?=$cur_uri?>" target="_blank">请检查此链接是否受信任</a></b>
  			<ul>
  				<?php FOREACH($uris AS $uri):?>
  					<?php IF($cur_uri != $uri->getUri()):?>
	  					<li>
	                        <a href="?version=<?=$cur_version?>&api_name=<?=$cur_api ? $cur_api->getApiName() : ''?>&uri=<?=$uri->getUri()?>">
	                            <?=$uri->getDesc()?><small><?=$uri->getUri()?></small>
	                        </a>
	                    </li>
                    <?php ENDIF;?>
  				<?php ENDFOREACH;?>
  			</ul>
 		</div>
		<?php ENDIF;?>
        <div class="version-list">
        	<span><b>版本:</b> <?=$cur_version?> </span>
        	<?php IF(count($all_versions) > 1): ?>
	        	<ul>
		            <?php FOREACH($all_versions AS $version):?>
		                <?php IF($cur_version != $version): ?>
			        		<li><a href="?version=<?=$version?>"><?=$version?></a></li>
		                <?php ENDIF;?>
		            <?php ENDFOREACH;?>
	            </ul>
            <?php ENDIF;?>
        </div>
        <div class="clear"></div>
    </div>
    <div class="api-list container">
		<div>
  			<p>选择接口:</p>
  			<ul>
  				<?php FOREACH($api_lists AS $api):?>
  					<?php IF($api->isDelete() == false):?>
	  					<li>
	                        <a href="?version=<?=$cur_version?>&api_name=<?=$api->getApiName()?>&uri=<?=$cur_uri?>">
	                            <?=$api->getLabelName()?><small><?=$api->getApiName()?></small>
	                        </a>
	                    </li>
                    <?php ENDIF;?>
  				<?php ENDFOREACH;?>
  			</ul> 
  		</div>
    </div>
  	<div class="left container">
  		<form action="<?=$cur_uri?>" method="post" target="test_api_frame" name="$api_form">
  			<div class="text-center">
	  			<h3>接口名称:<?=$cur_api ? $cur_api->getLabelName() : ''?><small><?=$cur_api ? $cur_api->getApiName() : ''?></small></h3>
  			</div>
  			<div>
  				<?php IF($cur_api):?>
	  				<?php FOREACH($cur_api->getRequestParamsDoc() AS $param): ?>
	  					<?php IF($param->isCommon()):?>
							<p class="input-group">
								<label title="<?=htmlspecialchars($param->getDesc())?>"><?=$param->getName()?>:</label>
								<?php IF($param->getName() == 'version'):?>
									<input type="text" value="<?=$cur_version?>" name="<?=$param->getName()?>" />
								<?php ELSEIF($param->getName() == 'timestamp'):?>
									<input type="text" value="<?=date('Y-m-d H:i:s')?>" name="<?=$param->getName()?>" />
								<?php ELSEIF($param->getName() == 'app_key'):?>
									<input type="text" value="<?=$_SESSION['APIAPPKEY']??htmlspecialchars($param->getExampleValue())?>" name="<?=$param->getName()?>" />
								<?php ELSEIF($param->getName() == 'api_name'):?>
									<input type="text" value="<?=$cur_api ? $cur_api->getApiName() : ''?>" name="<?=$param->getName()?>" />
								<?php ELSE:?>
									<input type="text" value="<?=htmlspecialchars($param->getExampleValue())?>" name="<?=$param->getName()?>" />
								<?php ENDIF;?>
							</p>
						<?php ENDIF;?>
	  				<?php ENDFOREACH;?>
	  				<?php FOREACH($cur_api->getRequestParamsDoc() AS $param): ?>
	  					<?php IF(!$param->isCommon()):?>
							<p class="input-group">
								<label title="<?=htmlspecialchars($param->getDesc())?>"><?=$param->getName()?>:</label>
								<input type="text" value="<?=htmlspecialchars($param->getExampleValue())?>" name="<?=$param->getName()?>" />
							</p>
						<?php ENDIF;?>
	  				<?php ENDFOREACH;?>
  				<?php ENDIF;?>
  			</div>
  			<div class="clear">
  				<input type="button" class="button" onclick="doMakeRequestExample()" value="生成请求示例" />
  				<input type="submit" class="button" value="生成响应结果" />
  			</div>
  		</form>
  	</div>
  	<div class="right container">
  		<?php IF($cur_api):?>
			<?php FOREACH($cur_api->getRequestParamsDoc() AS $param): ?>
				<?php IF($param->getName() == 'sign'):?>
			  		<div>
			  			<h2>签名生成</h2>
			  			<p>填写完左侧请求的参数后,输入与左侧app key对应的security</p>
			  			<p>
			  				<label>security:<input type="text" name="security" value="<?=$_SESSION['APISECURITY']??''?>" /></label>
			  				<input type="button" onclick="doMakeSign()" value="生成" />
			  			</p>
			  			<p><textarea name="sign_example"></textarea></p>
			  		</div>
		  		<?php BREAK;ENDIF;?>
			<?php ENDFOREACH;?>
		<?php ENDIF;?>
  		<div>
  			<h2>请求示例</h2>
  			<textarea name="request_example"></textarea>
  		</div>
  		<div>
  			<h2>响应结果</h2>
	  		<iframe name="test_api_frame"></iframe>
  		</div>
  	</div>
	<script type="text/javascript">
		// md5
		!function(n){"use strict";function t(n,t){var r=(65535&n)+(65535&t);return(n>>16)+(t>>16)+(r>>16)<<16|65535&r}function r(n,t){return n<<t|n>>>32-t}function e(n,e,o,u,c,f){return t(r(t(t(e,n),t(u,f)),c),o)}function o(n,t,r,o,u,c,f){return e(t&r|~t&o,n,t,u,c,f)}function u(n,t,r,o,u,c,f){return e(t&o|r&~o,n,t,u,c,f)}function c(n,t,r,o,u,c,f){return e(t^r^o,n,t,u,c,f)}function f(n,t,r,o,u,c,f){return e(r^(t|~o),n,t,u,c,f)}function i(n,r){n[r>>5]|=128<<r%32,n[14+(r+64>>>9<<4)]=r;var e,i,a,d,h,l=1732584193,g=-271733879,v=-1732584194,m=271733878;for(e=0;e<n.length;e+=16)i=l,a=g,d=v,h=m,g=f(g=f(g=f(g=f(g=c(g=c(g=c(g=c(g=u(g=u(g=u(g=u(g=o(g=o(g=o(g=o(g,v=o(v,m=o(m,l=o(l,g,v,m,n[e],7,-680876936),g,v,n[e+1],12,-389564586),l,g,n[e+2],17,606105819),m,l,n[e+3],22,-1044525330),v=o(v,m=o(m,l=o(l,g,v,m,n[e+4],7,-176418897),g,v,n[e+5],12,1200080426),l,g,n[e+6],17,-1473231341),m,l,n[e+7],22,-45705983),v=o(v,m=o(m,l=o(l,g,v,m,n[e+8],7,1770035416),g,v,n[e+9],12,-1958414417),l,g,n[e+10],17,-42063),m,l,n[e+11],22,-1990404162),v=o(v,m=o(m,l=o(l,g,v,m,n[e+12],7,1804603682),g,v,n[e+13],12,-40341101),l,g,n[e+14],17,-1502002290),m,l,n[e+15],22,1236535329),v=u(v,m=u(m,l=u(l,g,v,m,n[e+1],5,-165796510),g,v,n[e+6],9,-1069501632),l,g,n[e+11],14,643717713),m,l,n[e],20,-373897302),v=u(v,m=u(m,l=u(l,g,v,m,n[e+5],5,-701558691),g,v,n[e+10],9,38016083),l,g,n[e+15],14,-660478335),m,l,n[e+4],20,-405537848),v=u(v,m=u(m,l=u(l,g,v,m,n[e+9],5,568446438),g,v,n[e+14],9,-1019803690),l,g,n[e+3],14,-187363961),m,l,n[e+8],20,1163531501),v=u(v,m=u(m,l=u(l,g,v,m,n[e+13],5,-1444681467),g,v,n[e+2],9,-51403784),l,g,n[e+7],14,1735328473),m,l,n[e+12],20,-1926607734),v=c(v,m=c(m,l=c(l,g,v,m,n[e+5],4,-378558),g,v,n[e+8],11,-2022574463),l,g,n[e+11],16,1839030562),m,l,n[e+14],23,-35309556),v=c(v,m=c(m,l=c(l,g,v,m,n[e+1],4,-1530992060),g,v,n[e+4],11,1272893353),l,g,n[e+7],16,-155497632),m,l,n[e+10],23,-1094730640),v=c(v,m=c(m,l=c(l,g,v,m,n[e+13],4,681279174),g,v,n[e],11,-358537222),l,g,n[e+3],16,-722521979),m,l,n[e+6],23,76029189),v=c(v,m=c(m,l=c(l,g,v,m,n[e+9],4,-640364487),g,v,n[e+12],11,-421815835),l,g,n[e+15],16,530742520),m,l,n[e+2],23,-995338651),v=f(v,m=f(m,l=f(l,g,v,m,n[e],6,-198630844),g,v,n[e+7],10,1126891415),l,g,n[e+14],15,-1416354905),m,l,n[e+5],21,-57434055),v=f(v,m=f(m,l=f(l,g,v,m,n[e+12],6,1700485571),g,v,n[e+3],10,-1894986606),l,g,n[e+10],15,-1051523),m,l,n[e+1],21,-2054922799),v=f(v,m=f(m,l=f(l,g,v,m,n[e+8],6,1873313359),g,v,n[e+15],10,-30611744),l,g,n[e+6],15,-1560198380),m,l,n[e+13],21,1309151649),v=f(v,m=f(m,l=f(l,g,v,m,n[e+4],6,-145523070),g,v,n[e+11],10,-1120210379),l,g,n[e+2],15,718787259),m,l,n[e+9],21,-343485551),l=t(l,i),g=t(g,a),v=t(v,d),m=t(m,h);return[l,g,v,m]}function a(n){var t,r="",e=32*n.length;for(t=0;t<e;t+=8)r+=String.fromCharCode(n[t>>5]>>>t%32&255);return r}function d(n){var t,r=[];for(r[(n.length>>2)-1]=void 0,t=0;t<r.length;t+=1)r[t]=0;var e=8*n.length;for(t=0;t<e;t+=8)r[t>>5]|=(255&n.charCodeAt(t/8))<<t%32;return r}function h(n){return a(i(d(n),8*n.length))}function l(n,t){var r,e,o=d(n),u=[],c=[];for(u[15]=c[15]=void 0,o.length>16&&(o=i(o,8*n.length)),r=0;r<16;r+=1)u[r]=909522486^o[r],c[r]=1549556828^o[r];return e=i(u.concat(d(t)),512+8*t.length),a(i(c.concat(e),640))}function g(n){var t,r,e="";for(r=0;r<n.length;r+=1)t=n.charCodeAt(r),e+="0123456789abcdef".charAt(t>>>4&15)+"0123456789abcdef".charAt(15&t);return e}function v(n){return unescape(encodeURIComponent(n))}function m(n){return h(v(n))}function p(n){return g(m(n))}function s(n,t){return l(v(n),v(t))}function C(n,t){return g(s(n,t))}function A(n,t,r){return t?r?s(t,n):C(t,n):r?m(n):p(n)}"function"==typeof define&&define.amd?define(function(){return A}):"object"==typeof module&&module.exports?module.exports=A:n.md5=A}(this);
	</script>
	<script type="text/javascript">
		var doMakeSign	= function(){
			<?php
				$sorted_sign_keys	= [];
				if($cur_api && $cur_api->getRequestParamsDoc()){
					foreach($cur_api->getRequestParamsDoc() AS $param){
						if($param->getName() == 'sign'){
							continue;
						}
						$sorted_sign_keys[]	= $param->getName();
					}
				}
				sort($sorted_sign_keys);
			?>
			var sign_keys	= <?=json_encode($sorted_sign_keys)?>;
			var sign_str	= '';
			for(var i in sign_keys){
				var key		= sign_keys[i];
				var value	= document.getElementsByName(key)[0].value;
				sign_str	= sign_str + key + value;
			}
			sign_str		= sign_str + document.getElementsByName('security')[0].value;
			sign			= md5(sign_str);
			document.getElementsByName('sign')[0].value = sign.toUpperCase();
			document.getElementsByName('sign_example')[0].value =
				'待签名字符串:' + sign_str +
				"\r\n\r\n" + 
				'签名:' + sign.toUpperCase()
			;
		}
		var doMakeRequestExample	= function(){
			var exstr	= '';
			var inputs	= $api_form.getElementsByTagName('input');
			exstr = exstr + " curl " + $api_form.action + " \\\r\n";
			for(var i = 0; i < inputs.length; i++){
				if(!inputs[i].name){
					continue;
				}
				exstr	= exstr + " -d " + inputs[i].name + "=" + encodeURI(inputs[i].value);
				if(i < inputs.length - 1){
					exstr	= exstr + " \\\r\n";
				}
			}
			document.getElementsByName('request_example')[0].value = exstr;
		}
	</script>
  </body>
</html>
